import { baseUrl } from '../../utils/config'
const { shared, timing, Easing, runOnJS, sequence } = wx.worklet;
const { get } = require('../../utils/request.js')
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    
  },

  /**
   * 组件的初始数据
   */
  data: {
    baseUrl: baseUrl,
    childrenCards: [],
    childrenAnimal: {}
  },

  lifetimes: {
    attached() {
      this.data.childrenAnimal = shared(0);
      const interval = setInterval(() => {
        const token = wx.getStorageSync('token');
        if (token != undefined && token != '') {
          this.freshData();
          clearInterval(interval)
        }
      }, 100);
    }
  },



  /**
   * 组件的方法列表
   */
  methods: {
    freshData() {
      const unicode = wx.getStorageSync('unicode');
      get('bankaccount/bankcarddata', { 'unicode': unicode },
        (data) => {
          if (data && data.length > 0) {
            data.forEach((item, index) => {
              item.index = index;
            })
            this.setData({
              childrenCards: data
            })
            this.triggerEvent('onChangeCard', data[0]);
            this.addAnimalCode();
          }
        }
      )
    },
    addAnimalCode() {

      for (let element of this.data.childrenCards) {
        element.cardX = shared(0);
        element.scale = shared(0);
        element.opacity = shared(0);

        element.opacity.value = 1;

        if (element.index == 0) {
          element.scale.value = 1
        } else if (element.index == 1) {
          element.scale.value = 0.9
          element.cardX.value = 20
        } else if (element.index == 2) {
          element.scale.value = 0.8
          element.cardX.value = 40
        } else {
          element.scale.value = 1
          element.cardX.value = 0
        }
      }

      this.data.childrenAnimal.value = this.data.childrenCards;

      for (let element of this.data.childrenCards) {
        this.applyAnimatedStyle('.card-item-' + element.index, () => {
          'worklet';
          return {
            opacity: element.opacity.value,
            transform: `translateX(${element.cardX.value}px) scale(${element.scale.value}) `,
          };
        });
      }
    },

    changeCard(activeCard) {
      this.triggerEvent('onChangeCard', activeCard);
    },
    scrollNextCard() {
      const tempCards = [];
      try {
        for (let i = 0; i < this.data.childrenCards.length; i++) {
          let element = { ...this.data.childrenCards[i] };
          tempCards.push(element);
          if (element.index == 0) {
            element.index = this.data.childrenCards.length - 1;
          } else {
            element.index -= 1;
          }
        }
        this.setData({
          childrenCards: [...tempCards]
        })
        this.data.childrenAnimal.value = [...tempCards];
      } catch (e) {
        console.log(e)
      }
    },
    onGestureEvent(e) {
      'worklet'
      let firtCardx, opacity1, cardX1, cardX2, cardX3, scale1, scale2, scale3, activeCard;

      let childrenCards = this.data.childrenAnimal.value;

      for (let i = 0; i < childrenCards.length; i++) {
        const element = childrenCards[i];
        if (element.index == 0) {
          firtCardx = element.cardX;
        }
      }

      for (let i = 0; i < childrenCards.length; i++) {
        const element = childrenCards[i];
        if (element.index == 0) {
          opacity1 = element.opacity;
          cardX1 = element.cardX;
          scale1 = element.scale;
        } else if (element.index == 1) {
          activeCard = element;
          cardX2 = element.cardX;
          scale2 = element.scale;
        } else if (element.index == 2) {
          cardX3 = element.cardX;
          scale3 = element.scale;
        }
      }

      let stepLengthx = e.deltaX;
      let absx = Math.abs(firtCardx.value);

      if (e.state == 2) {
        const rateStep = 1 - absx / 40;
        stepLengthx = e.deltaX * rateStep;

        let scaleValue = stepLengthx < 0 ? 0.001 : -0.001;
        if (scale1.value < 1.1) {
          scaleValue = stepLengthx < 0 ? 0.001 : -0.001;
        } else {
          scaleValue = stepLengthx < 0 ? 0.0005 : -0.0005;
        }

        cardX1.value += stepLengthx
        cardX2.value += stepLengthx * 0.5
        if (cardX3) {
          cardX3.value += stepLengthx * 0.3
        }
        scale1.value += scaleValue
        scale2.value += scaleValue
        if (scale3) {
          scale3.value += scaleValue
        }

      }

      if (e.state == 3) {
        const fun = this.scrollNextCard.bind(this);
        const changeCardFun = this.changeCard.bind(this);

        if (e.velocityX < -500 || absx > 20) {
          const cardx1Value = childrenCards.length == 2 ? 20 : 40;
          opacity1.value = timing(0, { duration: 600 });
          cardX1.value = sequence(timing(-100, {
            duration: 600,
            easing: Easing.bezier(.35, .34, .02, 1),
          }), timing(cardx1Value, { duration: 10 }, function () {
            //  重新排列卡片显示顺序
            runOnJS(fun)()
            opacity1.value = timing(1, { duration: 600 });
          }));
          cardX2.value = timing(0, {
            duration: 600,
            easing: Easing.bezier(.25, .1, .25, 1),
          }, function () {
            runOnJS(changeCardFun)(activeCard)
          });
          if (cardX3) {
            cardX3.value = timing(20, {
              duration: 600,
              easing: Easing.bezier(.25, .1, .25, 1),
            });
          }

          const scaleValue = childrenCards.length == 2 ? 0.9 : 0.8;
          scale1.value = timing(scaleValue, {
            duration: 800,
            easing: Easing.bezier(.25, .1, .25, 1),
          });
          scale2.value = timing(1, {
            duration: 800,
            easing: Easing.bezier(.35, .34, .02, 1),
          });
          if (scale3) {
            scale3.value = timing(0.9, {
              duration: 800,
              easing: Easing.bezier(.25, .1, .25, 1),
            });
          }

        } else {
          cardX1.value = timing(0, {
            duration: 800,
            easing: Easing.bezier(.35, .34, .02, 1),
          });
          cardX2.value = timing(20, {
            duration: 800,
            easing: Easing.bezier(.25, .1, .25, 1),
          });
          if (cardX3) {
            cardX3.value = timing(40, {
              duration: 900,
              easing: Easing.bezier(.25, .1, .25, 1),
            });
          }


          scale1.value = timing(1, {
            duration: 800,
            easing: Easing.bezier(.35, .34, .02, 1),
          });
          scale2.value = timing(0.9, {
            duration: 800,
            easing: Easing.bezier(.25, .1, .25, 1),
          });
          if (scale3) {
            scale3.value = timing(0.8, {
              duration: 800,
              easing: Easing.bezier(.25, .1, .25, 1),
            });
          }
        }
      }
    },
    checkOnMove() {
      'worklet'
      return this.data.childrenAnimal.value.length > 1
    }
  }
})